<template>
  <div id="root">
    <el-card>
      <div slot="header">
        <span>个人信息</span>
      </div>
      <div id="card-body">
        <avatar-show :current-user="currentUser"></avatar-show>
        <el-divider></el-divider>
        <router-view/>
      </div>
    </el-card>
  </div>
</template>

<script>
import AvatarShow from "@/views/dashboard/person/AvatarShow.vue";
import {mapState} from "vuex";

export default {
  name: "Person",
  data() {
    return {}
  },
  components: {
    AvatarShow,
  },
  computed: {
    ...mapState(['currentUser']),
  },
}
</script>

<style scoped>
#root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-card {
  width: 95%;
  display: flex;
  flex-direction: column;
}

#card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

::v-deep .el-form-item__label {
  font-weight: bold;
}
</style>